<template>
  <div>
    <div><span class="goout" @click="primary">返回</span></div>
    <div>
      <el-form
        :model="formInline[0]"
        :rules="rules"
        ref="formInline[0]"
        label-width="100px"
        class="demo-ruleForm"
      >
        <div class="formone">
          <h1>房号信息</h1>
          <el-form-item label="单元名称" prop="unitname">
            <el-input v-model="formInline[0].unitname"></el-input>
          </el-form-item>
          <el-form-item label="幢号" prop="buildnum">
            <el-input v-model="formInline[0].buildnum"></el-input>
          </el-form-item>

          <el-form-item label="楼层号 " prop="storeynum">
            <el-input v-model="formInline[0].storeynum"></el-input>
          </el-form-item>
          <el-form-item label="房号" prop="homenum">
            <el-input v-model="formInline[0].homenum"></el-input>
          </el-form-item>

          <el-form-item label="住客姓名" prop="homename">
            <el-input
              v-model="formInline[0].homename"
              @focus="opens"
            ></el-input>
          </el-form-item>
          <el-form-item label="状态" prop="homestatus">
            <el-select
              v-model="formInline[0].homestatus"
              placeholder="请选择"
              clearable
            >
              <el-option label="已入住" :value="1"></el-option>
              <el-option label="未入住" :value="2"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="formtwo">
          <el-col>
            <el-tooltip class="item" effect="light" placement="top" with="50">
              <div slot="content" with="50" style="line-height: 18px">
                可填写房屋的详细信息介绍：<br />
                1.房屋的基本信息<br />
                2.房屋的成员信息<br />
                3.房屋的设备信息<br />
                4.房屋未来的规划填报
              </div>
              <i
                class="el-icon-question"
                style="color: deepSkyblue; position: absolute; margin-top: 10px"
              ></i>
            </el-tooltip>
            <el-form-item
              label="房屋信息"
              style="width: 98%"
              prop="homemessage"
            >
              <el-input
                type="textarea"
                v-model="formInline[0].homemessage"
                :rows="6"
                maxlength="100"
                show-word-limit
              ></el-input>
            </el-form-item>
          </el-col>
        </div>
        <div class="formtwo">
          <el-col>
            <el-tooltip class="item" effect="light" placement="top" with="50">
              <div slot="content" with="50" style="line-height: 18px">
                可对家庭成员的信息实时录入：<br />
                1.家庭的主要成员<br />
                2.家庭的主要成员的信息填报<br />
                3.家庭成员的健康信息状况<br />
                4.家庭成员每日健康体温检测填写
              </div>
              <i
                class="el-icon-question"
                style="color: deepSkyblue; position: absolute; margin-top: 10px"
              ></i>
            </el-tooltip>
            <el-form-item label="家庭成员" style="width: 98%" prop="homesuggestion">
              <el-input
                type="textarea"
                v-model="formInline[0].homesuggestion"
                :rows="6"
                maxlength="100"
                show-word-limit
              ></el-input>
            </el-form-item>
          </el-col>
        </div>
        <div class="formone">
          <h1>智能设备</h1>
          <el-form-item label="洗衣机数量" prop="washnum">
            <el-input v-model="formInline[0].washnum"></el-input>
          </el-form-item>
          <el-form-item label="WI-FI名称" prop="wifiname">
            <el-input v-model="formInline[0].wifiname"></el-input>
          </el-form-item>
          <br />
          <el-form-item label="空调数量" prop="airnum">
            <el-input v-model="formInline[0].airnum"></el-input>
          </el-form-item>
          <el-form-item label="智能设备状态" prop="smartstatus">
            <el-select
              v-model="formInline[0].smartstatus"
              placeholder="请选择"
              clearable
            >
              <el-option label="完好" :value="1"></el-option>
              <el-option label="待维修" :value="2"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="formone">
          <h1>家居设备</h1>
          <el-form-item label="书桌数量" prop="homedesk">
            <el-input v-model="formInline[0].homedesk"></el-input>
          </el-form-item>
          <el-form-item label="椅子数量" prop="homechair">
            <el-input v-model="formInline[0].homechair"></el-input>
          </el-form-item>
          <br />
          <el-form-item label="衣橱数量" prop="homeclothes">
            <el-input v-model="formInline[0].homeclothes"></el-input>
          </el-form-item>
          <el-form-item label="家居设备状态" prop="homestatus">
            <el-select
              v-model="formInline[0].familystatus"
              placeholder="请选择"
              clearable
            >
              <el-option label="完好" :value="1"></el-option>
              <el-option label="待维修" :value="2"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="btn">
          <el-form-item>
            <el-button type="success" @click="onSubmit('formInline[0]')"
              >保存</el-button
            >
            <el-button type="primary" @click="primary">返回</el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <!-- =================================================隐藏弹框 -->
    <!-- /users/getUserList -->
    <el-dialog title="住客姓名" :visible.sync="dialogFormVisible">
      <el-form :model="form[0]">
        <el-radio-group v-model="flag">
          <el-radio label="true">自定义</el-radio>
          <el-radio label="false">复制</el-radio>
        </el-radio-group>
        <div class="tkbot">
          <div v-if="flag == 'true'">
            <el-form-item>
              <el-input
                v-model="form.name"
                autocomplete="off"
                style="width: 100%"
                placeholder="请输入住客姓名"
              ></el-input>
            </el-form-item>
          </div>
        </div>
      </el-form>

      <div class="tkbot">
        <div v-if="flag == 'false'">
          <el-form :inline="true">
            <el-form-item>
              <el-input
                v-model="form.whait"
                autocomplete="off"
                placeholder="请输入用户账号"
              ></el-input>
            </el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="getEdit"
              >搜索</el-button
            >
          </el-form>
        </div>
      </div>
      <div v-if="flag == 'false'">
        <el-table
          ref="multipleTable"
          :data="form"
          style="width: 100%"
          :border="true"
        >
          <el-table-column label="ID" width="80" align="center" type="index">
          </el-table-column>
          <el-table-column
            align="center"
            prop="username"
            label="用户账号"
            width="160"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="homeaddress"
            label="家庭住址"
            width="230"
          >
          </el-table-column>
          <el-table-column align="center" label="类型">
            <template slot-scope="scope">{{
              scope.row.coststatus == 1 ? "管理员" : "普通用户"
            }}</template>
          </el-table-column>
          <el-table-column label="操作" width="60" align="center"
            ><i
              slot-scope="scope"
              @click="open2(scope.$index, scope.row)"
              class="el-icon-circle-plus"
            ></i>
          </el-table-column>
        </el-table>
        <div class="pageright">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[7, 10, 20, 30]"
            :page-size="pagesize"
            layout="total, sizes, prev, pager, next"
            :total="total"
          >
          </el-pagination>
        </div>

        <h2>已选结果</h2>
        <el-table
          ref="multipleTable"
          :data="form2"
          style="width: 100%"
          :border="true"
        >
          <el-table-column label="ID" width="80" align="center" type="index">
          </el-table-column>
          <el-table-column
            align="center"
            prop="username"
            label="用户账号"
            width="160"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="homeaddress"
            label="家庭住址"
            width="230"
          >
          </el-table-column>
          <el-table-column align="center" label="类型">
            <template slot-scope="scope">{{
              scope.row.coststatus == 1 ? "管理员" : "普通用户"
            }}</template>
          </el-table-column>
          <el-table-column label="操作" width="60" align="center"
            ><i
              slot-scope="scope"
              @click="open3(scope.$index, scope.row)"
              class="el-icon-remove"
            ></i>
          </el-table-column>
        </el-table>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="yesname">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      pagesize: 7,
      total: 0,
      flag: "true",
      formLabelWidth: "120px",
      form: [],
      form2: [],
      dialogFormVisible: false,
      ruleForm: {},
      rules: {
        unitname: [
          { required: true, message: "请输入单元名称", trigger: "blur" },
        ],
        buildnum: [
          { required: true, message: "请输入楼栋号", trigger: "blur" },
        ],
        storeynum: [
          { required: true, message: "请输入楼层号", trigger: "blur" },
        ],
        homenum: [{ required: true, message: "请输入房号", trigger: "blur" }],
        homename: [
          { required: true, message: "请输入住客姓名", trigger: "blur" },
        ],
        homemessage: [
          { required: true, message: "请输入房屋信息", trigger: "blur" },
        ],
        homesuggestion: [
          { required: true, message: "请输入家庭信息", trigger: "blur" },
        ],
        homestatus: [
          { required: true, message: "请选择房号状态", trigger: "change" },
        ],
        washnum: [
          { required: true, message: "请输入洗衣机数量", trigger: "blur" },
        ],
        wifiname: [
          { required: true, message: "请输入wifi名称", trigger: "blur" },
        ],
        airnum: [
          { required: true, message: "请输入空调数量", trigger: "blur" },
        ],
        smartstatus: [
          { required: true, message: "请选择智能设备状态", trigger: "change" },
        ],
        homedesk: [
          { required: true, message: "请输入书桌数量", trigger: "blur" },
        ],
        homechair: [
          { required: true, message: "请输入椅子数量", trigger: "blur" },
        ],

        homeclothes: [
          { required: true, message: "请输入衣橱数量", trigger: "blur" },
        ],
        familystatus: [
          { required: true, message: "请选择家居设备状态", trigger: "change" },
        ],
      },
      labelPosition: "right",
      formInline: [
        {
          unitname: "",
          buildnum: "",
          storeynum: "",
          homenum: "",
          homename: "",
          homestatus: "",
          homemessage: "",
          homesuggestion: "",
          washnum: "",
          wifiname: "",
          airnum: "",
          smartstatus: "",
          homedesk: "",
          homechair: "",
          homeclothes: "",
          familystatus: "",
        },
      ],
    };
  },
  created() {
    this.getList();
    this.getEdit();
  },
  methods: {
    // 分页回调
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pagesize = val;
      this.getEdit();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.getEdit();
    },
    // 右侧警告弹框
    open2(index, row) {
      console.log(row, index);
      console.log(row.username);
      if (row.homeaddress) {
        this.$notify({
          title: "警告",
          message: `目前【${row.username}】已录入房屋信息，请勿重复操作`,
          type: "warning",
        });
      } else {
        this.$set(this.form2, 0, row);
        console.log(this.form2);
      }
    },
    //打开编辑框
    open3(index, row) {
      this.form2 = [];
    },
    opens() {
      console.log(111);
      this.dialogFormVisible = true;
    },
    // 确定数据传回
    yesname() {
      if (this.flag == "false") {
        this.formInline[0].homename = this.form2[0].username;
        this.dialogFormVisible = false;
      } else {
        this.formInline[0].homename = this.form.name;
        this.dialogFormVisible = false;
      }
    },
    // 保存修改
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$confirm("确定保存该房号消息？", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(async () => {
              await this.$axios
                .post("/house/updatenumList", {
                  // communityname: this.formInline[0].unitname,
                  unitname: this.formInline[0].unitname,
                  buildnum: this.formInline[0].buildnum,
                  storeynum: this.formInline[0].storeynum,
                  homenum: this.formInline[0].homenum,
                  homename: this.formInline[0].homename,
                  homestatus: this.formInline[0].homestatus,
                  homemessage: this.formInline[0].homemessage,
                  homesuggestion: this.formInline[0].homesuggestion,
                  washnum: this.formInline[0].washnum,
                  wifiname: this.formInline[0].wifiname,
                  airnum: this.formInline[0].airnum,
                  smartstatus: this.formInline[0].smartstatus,
                  homedesk: this.formInline[0].homedesk,
                  homechair: this.formInline[0].homechair,
                  homeclothes: this.formInline[0].homeclothes,
                  familystatus: this.formInline[0].familystatus,
                  id: this.$route.query.ids,
                  h_id: this.$route.query.ids,
                  token: sessionStorage.getItem("token"),
                  homeaddress: this.formInline[0],
                })
                .then((res) => {
                  this.$message({
                    type: "success",
                    showClose: true,
                    message: "房号设备信息更新成功!",
                  });
                  this.$router.push("/house/number");
                });
            })
            .catch(() => {
              this.$message({
                type: "info",
                showClose: true,
                message: "已取消保存",
              });
            });
        } else {
          this.$message({
            type: "error",
            showClose: true,
            message: "请完善房号信息",
          });
        }
      });
    },
    // 数据获取
    async getList() {
      await this.$axios
        .get("/house/getDetailId", {
          params: {
            id: this.$route.query.ids,
            token: sessionStorage.getItem("token"),
          },
        })
        .then((res) => {
          // console.log(res);
          this.formInline = res.data;
          console.log(this.formInline);
        });
    },
    // 编辑数据请求
    async getEdit() {
      await this.$axios
        .get("/users/getUserList", {
          params: {
            username: this.form.whait,
            currPage: this.currentPage - 1,
            pageNum: this.pagesize,
          },
        })
        .then((res) => {
          // console.log(res);
          this.form = res.data.data;
          // this.form2 = res.data.data;
          this.total = res.data.total;
        });
    },
    // 返回
    primary() {
      this.$router.go(-1);
    },
  },
};
</script>

<style scoped>
h1 {
  width: 100%;
}
.el-input {
  width: 35vw;
}
::v-deep .el-table .has-gutter tr th {
  background: rgb(238, 241, 246);
  color: rgb(31, 45, 61);
  border-color: rgb(223, 230, 236);
  font-size: 14px;
  text-align: center;
}
.formone {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 96%;
  margin-left: 20px;
}
.formtwo {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.el-form-item__label {
  width: 120px;
}
.el-col-24 {
  width: 89%;
}
.el-input--medium ::v-deep .el-input__inner {
  width: 35vw;
}
.el-select ::v-deep .el-input__inner {
  width: 35vw;
}
.btn {
  display: flex;
  justify-content: flex-end;
}
.pageright {
  display: flex;
  justify-content: flex-end;
}
.el-icon-circle-plus {
  color: #58b881;
  font-size: 16px;
  cursor: pointer;
}
.el-icon-remove {
  color: #f35f36;
  font-size: 16px;
  cursor: pointer;
}
.goout {
  color: #559eff;
}
.tkbot {
  padding-top: 10px;
}
</style>